﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>客户信息</title>
	<link rel="stylesheet" href="~/lib/layui/css/layui.css">
	<style>
		/* 整体容器样式 */
		.layui-container {
			padding: 20px;
			background-color: #f9f9f9;
			border: 1px solid #e6e6e6;
			border-radius: 5px;
		}

		/* 表单标签样式 */
		.layui-form-item.layui-form-label {
			width: 120px;
			text-align: right;
			padding-right: 10px;
			font-weight: normal;
		}

		/* 输入框组样式 */
		.layui-input-block,
		.layui-input-inline {
			margin-bottom: 15px;
		}

		/* 按钮样式 */
		.layui-form-item.layui-input-block button {
			margin-right: 10px;
		}

		/* 下拉选择框样式 */
		.layui-select {
			width: 100%;
		}
	</style>
</head>

<body>
	<div class="layui-container">
		<form class="layui-form" id="customerForm">
			<div class="layui-input-inline">
				<label class="layui-input-inline">客户名称</label>
				<div class="layui-input-inline">
					<input type="text" name="customerName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-input-inline">
				<label class="layui-input-inline" style="width:auto">客户别名</label>
				<div class="layui-input-inline">
					<input type="text" name="customeraliases" placeholder="请输入客户别名" class="layui-input">
				</div>
			</div>

			<div class="layui-input-inline">
				<label class="layui-input-inline" style="width:auto">简称</label>
				<div class="layui-input-inline">
					<input type="text" name="abbreviation" placeholder="请输入简称" class="layui-input">
				</div>

				<label class="layui-input-inline" title="所属省/市/区">
					所属省/市/区
				</label>
				<div class="layui-input-inline">
					<div class="layui-input-inline" style="width: 30%;">
						<select name="provinces" id="provinces" lay-filter="provinces" lay-search=""></select>
					</div>
					<div class="layui-input-inline" style="width: 30%;">
						<select name="cities" id="cities" lay-filter="cities" lay-search=""></select>
					</div>
					@* <div class="layui-input-inline" style="width: 30%;"> *@
					@* 	<select name="area" id="area" lay-filter="area" lay-search=""></select> *@
					@* </div> *@
				</div>
			</div>
			<!-- 更多表单字段 -->
			<div class="layui-input-inline">
				<label class="layui-input-inline" style="width:auto">公司地址</label>
				<div class="layui-input-inline">
					<input type="text" name="companyAddr" class="layui-input">
				</div>
			</div>

			<div class="layui-input-inline">
				<label class="layui-input-inline" style="width:auto">邮编</label>
				<div class="layui-input-inline">
					<input type="text" name="email" class="layui-input">
				</div>
				<label class="layui-input-inline" style="width:auto">电话</label>
				<div class="layui-input-inline">
					<input type="text" name="phone" class="layui-input">
				</div>
			</div>

			<div class="layui-input-inline">
				<label class="layui-input-inline" style="width:auto">信用等级</label>
				<div class="layui-input-inline">
					<select name="creditRating" lay-verify="required">
						<option value="">请选择</option>
						<option value="1">A级</option>
						<option value="2">B级</option>
						<option value="3">C级</option>
					</select>
				</div>
				<label class="layui-input-inline" style="width:auto">信用额度</label>
				<div class="layui-input-inline">
					<input type="text" name="creditLimit" class="layui-input">
				</div>
			</div>

			<div class="layui-input-inline">
				<label class="layui-input-inline" style="width:auto">客户分类</label>
				<div class="layui-input-inline">
					<select name="customerSegmentation" lay-verify="required">
						<option value="">请选择</option>
						<option value="1">核心客户</option>
						<option value="2">普通客户</option>
					</select>
				</div>
				<label class="layui-input-inline" style="width:auto">备注</label>
				<div class="layui-input-inline">
					<input type="text" name="remark" class="layui-input">
				</div>
			</div>

			<div class="layui-input-inline">
				<div class="layui-input-inline">
					<label class="layui-inline" style="width:auto">状态</label>
					<input class="layui-input-inline" type="radio" name="state" value="正常" title="正常" checked>
					<input class="layui-input-inline" type="radio" name="state" value="停用" title="停用">
				</div>
			</div>

			<!-- 新增开票信息字段 -->
			<div class="layui-input-inline">
				<label class="layui-input-inline">开户行</label>
				<div class="layui-input-inline">
					<input type="text" name="bank_name" placeholder="请输入开户行" class="layui-input">
				</div>
			</div>
			<div class="layui-input-inline">
				<label class="layui-input-inline">银行账号</label>
				<div class="layui-input-inline">
					<input type="text" name="account_number" placeholder="请输入银行账号" class="layui-input">
				</div>
			</div>
			<div class="layui-input-inline">
				<label class="layui-input-inline">税号</label>
				<div class="layui-input-inline">
					<input type="text" name="tax_number" placeholder="请输入税号" class="layui-input">
				</div>
			</div>
			<div class="layui-input-inline">
				<label class="layui-input-inline">地址电话</label>
				<div class="layui-input-inline">
					<input type="text" name="address_phone" placeholder="请输入地址电话" class="layui-input">
				</div>
			</div>
			<div class="layui-input-inline">
				<label class="layui-input-inline">联系人</label>
				<div class="layui-input-inline">
					<input type="text" name="contact" placeholder="请输入联系人" class="layui-input">
				</div>
			</div>

			<div class="layui-input-inline">
				<div class="layui-input-inline">
					<button class="layui-btn" lay-submit lay-filter="saveCustomer">确定</button>
					<button type="reset" class="layui-btn layui-btn-primary">取消</button>
				</div>
			</div>
		</form>
	</div>
	<script src="~/lib/layui/layui.js"></script>
	<script type="text/javascript" src="~/lib/area.js"></script>

	<script>
		layui.use(['form', 'layer', 'jquery'], function () {
			var form = layui.form;
			var layer = layui.layer;
			var $ = layui.$;
			//Contact
			function loadAddress(array, lables, notId) {
				var s = '<option value="">请选择</option>';
				if (array) {
					for (var i = 0; i < array.length; i++) {
						var obj = array[i];
						s += '<option value="' + obj.address + '" lay-id="' + obj.code + '">' + obj.address + '</option>';
					}
				}
				$(notId).empty();
				$(lables).html(s);
				form.render("select");
			}

			// 省级选择，获取市
			form.on('select(provinces)', function (data) {
				var array = layArea.getCityList(data.value);
				loadAddress(array, "#cities", "#cities,#area")
			});



			// 市级选择，获取地区/县
			// form.on('select(city)', function (data) {
			// 	var name1 = $("#province").val();
			// 	var array = layArea.getAreaList(name1, data.value);
			// 	loadAddress(array, "#area", "#area")
			// });

			// 加载省份
			loadAddress(layArea.array, "#provinces", "#cities,#area");

			form.on('submit(saveCustomer)', function (data) {
				var fromData = data.field;
				var postData = {
					customerName: fromData.customerName,
					customeraliases: fromData.customeraliases,
					abbreviation: fromData.abbreviation,
					provinces: fromData.provinces,
					cities: fromData.cities,
					companyAddr: fromData.companyAddr,
					email: fromData.email,
					phone: fromData.phone,
					contact: fromData.contact,
					creditRating: fromData.creditRating,
					creditLimit: fromData.creditLimit,
					customerSegmentation: fromData.customerSegmentation,
					remark: fromData.remark,
					state: fromData.state === true,

					//开票信息
					bank_name:fromData.bank_name,
					account_number:fromData.account_number,
					tax_number:fromData.tax_number,
					address_phone:fromData.address_phone
				};
				console.log(data);
				$.ajax({
					//url: 'http://localhost:5090/api/ClientsManagement/AddClientfunc',
					url: "@ViewBag.BaseUrl/T8/ClientsManagement/AddClientfunc",
					datatype: 'json',
					type: 'POST',
					contentType: 'application/json',
					data: JSON.stringify(postData),
					async: true,
					success: function (res) {
						console.log(res);
						if (res.code == 213) {
							layer.alert('新增成功');
						}
						else {
							layer.alert('新增失败');
						}
					}
				});
				// 阻止表单默认提交行为（页面跳转）
				return false;
			});
		});
	</script>
</body>

</html>